<template>
	<Space :gap='gap' :align='align' v-if='data.length>0'>
		<template v-for='(v,i) in data' :key='i'>
			<Dropdown v-if="v.mode === 'dropdown'" :label="v.label ?? '操作'" :data='v.data' :disabled 	= 'disabled || setDisabled(v)' :loading='loading || v.loading' :perm='config.perm' @select='v=>onClick(v)'/>
			<template v-else-if="v.mode === 'delPop' && !v.hide">
				<Popconfirm :title 	= " v.msg || `确认${ v.label ? v.label : cg.btnName[v.mode]  }此数据？`" @confirm = 'onClick(v)'>
					<Button 
					:size 		= 'size'
					:label 		= 'setButtonLable(v)'  
					:disabled 	= 'disabled || setDisabled(v)' 
					:loading 	= 'loading || v.loading'
					:ghost 		= 'setGhost(v)'
					mode 		= 'del'
					:type 		= 'v.type'
					:code 		= 'v.code'
					:danger 	= 'v.danger'
					:isIcon 	= 'v.isIcon'
					:width 		= 'v.width'
				/>
				</Popconfirm>
			</template>
			<template v-else-if="v.mode === 'div' && !v.hide">
				<div :class='v.class' :style='v.style'></div>
			</template>
			<template v-else-if="v.mode === 'ex' && !v.hide">
				<div :class="['ex',v.class]" :style='v.style'></div>
			</template>
			<template v-else>
				<Button
					v-if 		= '!v.hide'
					:size 		= 'size' 
					:label 		= 'setButtonLable(v)'  
					:disabled 	= 'disabled || setDisabled(v)' 
					:loading 	= 'loading || v.loading'
					:ghost 		= 'setGhost(v)'
					:mode 		= 'setMode(v)'
					:icon  		= 'v.icon'
					:type 		= 'v.type'
					:htmlType 	= 'v.htmlType'
					:code 		= 'v.code'
					:danger 	= 'v.danger'
					:isIcon 	= 'v.isIcon'
					:width 		= 'v.width'
					@click 		= 'onClick(v)' 
				/>
			</template>
		</template>
	</Space>
</template>

<script setup>
	import { onMounted } from 'vue'
	import { Popconfirm } from 'ant-design-vue'
	import ControlsUtils from '#cpt/utils/controls'
	import { useRoute, useRouter } from 'vue-router'
	const router = useRouter()
	const cg = $config
	/* --------------------------- Component --------------------------- */
	const Button = $.lazy(()=>import('@antd/button.vue'))
	const Dropdown	= $.lazy(()=>import('@antd/dropdown.vue'))
	const Space	= $.lazy(()=>import('@tp/space.vue'))
	// const FormModal 	= $.lazy(()=>import('#cpt/temp/FormModal.vue'))
	/* --------------------------- props --------------------------- */
	const props = defineProps({
		table 		: Object,
		dir			: { type:[Number, Boolean], value: 0 },// 0: 右侧，1：左侧
		config 		: { type:Object, default: { controls:[] } },
		size 		: { type:String, default:'small' },
		gap 		: { type:[Number, String], default: $config.btnSpace },
		align 		: { type:String, default: 'end' },
		isMyClick 	: Boolean,
		isTable 	: Boolean,
		loading 	: Boolean,
		disabled 	: Boolean,
		refresh 	: Boolean,
		back 		: Boolean
	})
	const { table, config, refresh, back } = props
	let { controls, perm } = config
	controls = $fn.isArray(controls) ? controls : []
	
	if(refresh){
		controls.push({ label:'刷新', mode:'refresh'})
	}
	if(back){
		controls.push({ label:'返回', mode:'back'})
	}
	
	let data = $ref( $fn.getResult(controls) ?? [ ] )
	
	const btnName = {
		mod 	: '修改',
		del 	: '删除',
		delPop 	: '删除',
		back 	: '返回',
		add 	: '新建',
		refresh : '刷新'
	}
	const setButtonLable = ({ mode, label }) => {
		if(label){
			return label
		}else{
			return $config?.btnName?.[mode] ?? btnName[mode]
		}
	}
	
	const setDisabled = ({ mode, disabled, isKeys }) => {
		if( $fn.getResult(config.disabled) ){
			return true
		}else{
			if( ['del','delPop'].includes(mode) && !props.isTable ){ isKeys = 1 }
			if( isKeys && table?.row ){
				const keys = table?.row?.keys ?? []
				const rows = table?.row?.rows ?? []
				if( keys.length === 0 ){
					return true
				}else{
					return $fn.getResult(disabled, { keys, rows })
				}
			}else{
				return $fn.getResult(disabled)
			}
		}
	}
	
	const setGhost = ({ mode, ghost }) => {
		if(ghost){
			return ghost
		}else{
			if(props.isTable){
				return true
			}else{
				return ['back','refresh','del'].includes(mode)
			}
		}
	}
	
	const setMode = ({ mode, icon }) => {
		if(icon){
			return icon
		}else{
			if(['formModal','tableModal'].includes(mode)){
				return 'set'
			}else{
				return mode
			}
		}
	}
	
	const onUploadChange = data => {}
	
	const emit = defineEmits(['click'])
	
	const onClick = option => {
		if( props.isMyClick ){
			emit('click', option)
		}else{
			ControlsUtils({option, tableConfig:table, router })
		}
	}
	
	// 动态设置权限
	// watch(()=>props.config.perm, perm => data = [ ...$fn.setPerm( data, perm ) ] )
	
	onMounted(()=>{
		data = [ ...$fn.setPerm( data, perm ) ]
	})
	/* --------------------------- 通信 --------------------------- */
</script>